import React,{Component} from "react"
import {getList} from "../../api/api"
import { Toast} from 'antd-mobile';
import "./play.css"
var flag=true
let count=1
let newId
let suij=false
function showToast(e) {
	if(e===1){
		Toast.info('列表播放', 1);
	}
	if(e===2){
		Toast.info('随机播放', 1);
	}
	if(e===3){
		Toast.info('单曲循环', 1);
	}
}
	//这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html
var startX, x= 0; //触摸时的坐标 //滑动的距离  //设一个全局变量记录上一次内部块滑动的位置 
class Play extends Component{
	constructor(props){
		super(props)
		this.state={
			data:'',
			id:this.props.nums
		}
	}
	UNSAFE_componentWillReceiveProps(nextProps){
		let {nums}=nextProps
			getList(nums)
		     .then(res =>{
					this.setState({
						data:res.data.data[0]
					})
			})
	}
	componentDidMount(nextProps){
		setTimeout(() => {
		  Toast.hide();
		}, 3000);
		var audio = document.getElementById("audio");
		var control = document.getElementById("control");
		var currentTime1 = document.getElementById("currentTime");
		var allTime1 = document.getElementById("allTime");
		audio.volume=0.5
		let that=this
		 audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
		    function() {
				control.className='play'
		        that.addListenTouch(); //歌曲加载之后才可以拖动进度条
		        var allTime = audio.duration;
				allTime1.innerText=that.timeChange(allTime);
		        setInterval(function() {
		            var currentTime = audio.currentTime;
					currentTime1.innerText=that.timeChange(currentTime)
		        }, 1000);
		        that.clicks();
		    }, false);
			
		audio.addEventListener("pause",
		    function() { //监听暂停
				control.className='play'
		        if (audio.currentTime === audio.duration) {
					control.children[0].className='iconfont icon-bofang'
		            audio.currentTime = 0;
		        }
		    }, false);
		audio.addEventListener("play",
		    function() { //监听暂停
				control.className='pause'
				control.children[0].className='iconfont icon-tubiaozhizuomoban'
		        that.dragMove();
		    }, false);
		audio.addEventListener("ended", function() {
			if(suij){
				let sj=parseInt(Math.random()*that.props.arr.length)
				console.log(sj)
				let id=that.props.arr[sj]
				that.props.jieshou(id)
			}else{
				that.xia()
				// audio.play()
			}
		}, false)
	}
	//进度条点击
	btn(e){
		var audio = document.getElementById("audio");
		var progressBar = document.querySelector(".progressBar").offsetLeft;
		var drag = document.getElementById("drag");
		var speed = document.getElementById("speed");
		let num = e.clientX-progressBar
		drag.style.left = num+ "px";
		speed.style.left = num-parseInt(drag.parentNode.offsetWidth) + "px";
		let jd=num/parseInt(drag.parentNode.offsetWidth)
		audio.currentTime = audio.duration*jd
	}
	//点击播放/暂停
	 clicks() {
	    var audio = document.getElementById("audio");
		var control = document.getElementById("control");
		let that=this
		control.onclick=function(){
			var dh = document.querySelector(".dh");
			if(control.className==='play'){
				control.className='pause'
				dh.className='dh start'
				control.children[0].className='iconfont icon-tubiaozhizuomoban'
				 audio.play();//开始播放
				that.dragMove();//并且滚动条开始滑动
			}else{
				dh.className='dh end'
				control.className='play'
				control.children[0].className='iconfont icon-bofang'
				audio.pause();
			}
		}
	}
	//播放时间
	timeChange(time) {//默认获取的时间是时间戳改成我们常见的时间格式
	    //分钟		
	    var minute = time / 60;
	    var minutes = parseInt(minute);
	    if (minutes < 10) {
	        minutes = "0" + minutes;
	    }
	    //秒
	    var second = time % 60;
	    let seconds = parseInt(second);
	    if (seconds < 10) {
	        seconds = "0" + seconds;
	    }
	    let allTime =minutes + ":" + seconds 
	    return allTime
	}
	
	
	//1拖动监听touch事件
	 addListenTouch() {
	    document.getElementById("drag").addEventListener("touchstart", this.touchStart, false);
	    document.getElementById("drag").addEventListener("touchmove", this.touchMove, false);
	    document.getElementById("drag").addEventListener("touchend", this.touchEnd, false);
	}
	 touchStart(e) {  
	    e.preventDefault();
	    var touch = e.touches[0];
	    startX = touch.pageX; 
	}
	  touchMove(e) { //滑动    
		var audio = document.getElementById("audio");
		var drag = document.getElementById("drag");
		var speed = document.getElementById("speed");
	    e.preventDefault();
	    var touch = e.touches[0];
		 flag=false
	    x = touch.pageX - startX; //滑动的距离
		 let num=(audio.currentTime / audio.duration) * (parseInt(drag.parentNode.offsetWidth)) 
		 let dj=(num+x)*audio.duration/parseInt(drag.parentNode.offsetWidth)
	    //drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式 
		 if(num+x>parseInt(drag.parentNode.offsetWidth)){
			 console.log(123)
			 drag.style.left = drag.parentNode.offsetWidth + "px"; //  
			 speed.style.left = 0 + "px";
		 }else{
			  var timePlace = document.getElementById('currentTime');
			 //分钟		
			 var minute = dj / 60;
			 var minutes = parseInt(minute);
			 if (minutes < 10) {
			     minutes = "0" + minutes;
			 }
			 //秒
			 var second = dj % 60;
			 let seconds = parseInt(second);
			 if (seconds < 10) {
			     seconds = "0" + seconds;
			 }
			 var allTime = minutes  + ":" + seconds
			 timePlace.innerHTML = allTime;
			 drag.style.left = num + x + "px"; //  
			 speed.style.left = (num + x) -parseInt(drag.parentNode.offsetWidth) + "px";
		 }
	}
	  touchEnd(e) { //手指离开屏幕
	  var audio = document.getElementById("audio");
	  var drag = document.getElementById("drag");
	    e.preventDefault();
		 flag=true
	    var dragPaddingLeft = drag.style.left;
	
	    var change = dragPaddingLeft.replace("px", "");
	    let numDragpaddingLeft = parseInt(change);
	    var currentTime = (numDragpaddingLeft / (parseInt(drag.parentNode.offsetWidth))) * audio.duration;//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外
	    if(!currentTime){
			audio.currentTime=0
			return 
		}
		audio.currentTime = currentTime;
	}
	//3拖动的滑动条前进
	 dragMove() {
		 var drag = document.getElementById("drag");
		 var speed = document.getElementById("speed");
		 var audio = document.getElementById("audio");
			setInterval(function() {
				if(flag){
					let num=(audio.currentTime / audio.duration) * (parseInt(drag.parentNode.offsetWidth)) 
					drag.style.left = num+ "px";
					speed.style.left = num-parseInt(drag.parentNode.offsetWidth) + "px";
				}
			}, 500);
	
	}
	list(){
		var list=document.querySelector('#list')
		var audio=document.querySelector('#audio')
		count++
		showToast(count)
		if(count===1){
			list.className='iconfont icon-liebiaoxunhuan'
			audio.loop=''
		}
		if(count===2){
			suij=true
			list.className='iconfont icon-suijibofang'			
		}
		if(count===3){
			count=0
			suij=false
			list.className='iconfont icon-danquxunhuan'
			audio.loop='loop'
		}
	}

	sh(){
		let num1=this.props.arr.indexOf(parseInt(this.props.nums))
		if(num1==0){
			this.props.jieshou(this.props.arr[this.props.arr.length-1])
		}else{
			let id=this.props.arr[num1-1]
			this.props.jieshou(id)
		}
	
	}
	xia(){
		let num1=this.props.arr.indexOf(parseInt(this.props.nums))
		if(num1==this.props.arr.length){
			this.props.jieshou(0)
		}else{
			let id=this.props.arr[num1+1]
			this.props.jieshou(id)
		}
	}
	render(){
		return(
			<div className='playbox'>
			    <audio id="audio" src={this.state.data.url} autoPlay='autoplay'></audio>
				<div className='jdt'>
					<span className="currentTime" id="currentTime">00:00</span>
					<section className="progressBar" onClick={this.btn}>
						<div className="progressBac"></div>
						<div className="speed" id="speed"></div>
						<div className="drag" id="drag"></div>
					</section>
					<span className="allTime" id="allTime">00:00</span>,
				</div>
				<div className='con'>
					<i className='iconfont icon-liebiaoxunhuan' onClick={this.list} id='list'></i>
					<i className='iconfont icon-shangyiqu101' onClick={this.sh.bind(this)}></i>
					<button id="control">
						<i className='iconfont icon-bofang'></i>
					</button>
					<i className='iconfont icon-xiayiqu101' onClick={this.xia.bind(this)}></i>
					<i className='iconfont icon-wuxuliebiao'></i>
				</div>
			</div>			
		)
	}
}
export default Play
